<template>
  <div>
    <!--搜索组件-->
    <el-card id="search">
      <el-row>
        <el-col :span="20" >
          <el-input v-model="searchModel.serialNumber" placeholder="请输入流水号" clearable></el-input>
          <el-input v-model="searchModel.completionNumber" placeholder="请输入完工单号" clearable></el-input>
          <el-input v-model="searchModel.schemeNo" placeholder="请输入计划编号" clearable></el-input>
          <el-input v-model="searchModel.workmanship" placeholder="请输入作业名称" clearable></el-input>
          <el-input v-model="searchModel.inspectionBatch" placeholder="请输入检验批次" clearable></el-input>
          <el-date-picker
            v-model="date1"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始生产日期"
            end-placeholder="结束生产日期"
            @change="dateFormat"
          >
          </el-date-picker>

          <el-input v-model="searchModel.project" placeholder="请输入检验项" clearable style="margin-left: 10px"></el-input>
          <el-select v-model="searchModel.result" placeholder="请选择检验结果">
            <el-option
              v-for="item in searchModel.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="searchModel.surveyor" placeholder="请输入检验人" clearable></el-input>
          <el-date-picker
            v-model="date2"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始检验日期"
            end-placeholder="结束检验日期"
            @change="dateFormat"
          >
          </el-date-picker>
          <el-col>
            <el-button
              @click="getTracingList"
              type="primary"
              round icon="el-icon-search"
            >搜索</el-button>
            <el-button
              @click="reset"
              type="primary"
              round icon="el-icon-refresh"
            >重置</el-button>
          </el-col>
        </el-col>
      </el-row>
    </el-card>
    <!--结果列表-->
    <el-card id="list">
      <el-table
        :data="tracingList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="编号"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="serialNumber"
          label="流水号"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="schemeNo"
          label="计划编号"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="completionNumber"
          label="完工单号"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="workmanship"
          label="作业名称"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="productionLine"
          label="产线名称"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="inspectionBatch"
          label="检验批次"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="产品名称"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="productTime"
          label="生产日期"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="project"
          label="检验项"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="productionQuantity"
          label="生产数量"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="number"
          label="抽检数量"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="result"
          label="检验结果"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.result == 1">合格</el-tag>
            <el-tag v-else type="danger">不合格</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="surveyor"
          label="检验人"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="testTime"
          label="检验时间"
          align="center"
          width="150"
        >
        </el-table-column>
      </el-table>
    </el-card>
    <!--分页组件-->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchModel.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="searchModel.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import tracingApi from '@/api/tracing'
export default {
  name: 'tracing',
  data() {
    return {

      date1: '',
      date2: '',
      formLabelWidth:'200px',//控制'用户名'到左边的宽度
      tracingForm:{},
      dialogFormVisible:false,//控制对话框是否可见
      title:'',
      total:0,
      searchModel: {
        pageNum:1,
        pageSize: 10,
        startTime: '',
        endTime: '',
        ksTime:'',
        jsTime:'',
        options: [{
          value: '1',
          label: '合格'
        }, {
          value: '0',
          label: '不合格'
        }, ],
        value: '',
      },
      tracingList: [],
    }
  },
  methods:{
    dateFormat(picker) {
      this.searchModel.startTime = picker[0].toString()
      this.searchModel.endTime = picker[1].toString()
    },
    reset(){
      pageNum: 1
      pageSize: 10
      this.searchModel.serialNumber =  ''
      this.searchModel.completionNumber = ''
      this.searchModel.schemeNo = ''
      this.searchModel.workmanship = ''
      this.searchModel.inspectionBatch = ''
      this.searchModel.productTime = ''
      this.searchModel.project = ''
      this.searchModel.result = ''
      this.searchModel.surveyor = ''
      this.searchModel.ksTime = ''
      this.searchModel.jsTime = ''
      this.searchModel.startTime = ''
      this.searchModel.endTime = ''
      this.getTracingList()
    },
    clearForm(){
      //清理表单
      this.tracingForm = {};
      this.$refs.tracingFormRef.clearValidate();//清除校验结果
    },
    handleSizeChange(pageSize){
      this.searchModel.pageSize = pageSize;
      this.getTracingList();
    },
    handleCurrentChange(pageNum){
      this.searchModel.pageNum = pageNum;
      this.getTracingList();
    },
    getTracingList() {
      tracingApi.getTracingList(this.searchModel).then(response => {
        this.tracingList = response.data.rows;
        this.total = response.data.total;
      });
    },
    delStandardById(tracing){
      this.$confirm(`您确认删除流水号为${tracing.serialNumber}的数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        tracingApi.delStandardById(tracing.id).then(response =>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getTracingList();

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created() {
    this.getTracingList();
  }
}
</script>

<style scoped>
#search .el-input {
  width: 200px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 5px;
}
#search .el-date-picker{
  width: 300px;
  margin-top: 10px;
  margin-right: 10px;
}
.el-dialog .el-input{
  width: 80%;
}
</style>
